<%@page language="java" pageEncoding="UTF-8" contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%@taglib prefix="sj"  uri="/struts-jquery-tags" %>
<%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags" %>

<script type="text/javascript" charset="ISO-8859-1"> 
			$(document).ready(function() {
				$("#tabla").dataTable();
			} );
</script>

<script type="text/javascript">

function agregarComentarios(idTarea) {
		$.ajax({
			  url: "../comentarios/agregarComentarioPorTarea.action?tarea.id="+idTarea,
			  context: document.body,
			  success: function(datos){
			  	$("#contenidoComentarios").html(datos);
			  }
			});
	}

	var popupStatus = 0;
	function mostrarPopUpComentarios(idTarea) {
		agregarComentarios(idTarea);

		if (popupStatus==0) {
			$("#fondoPopup").css({  
			 "opacity": "0.7"  
			 });
			$("#fondoPopup").fadeIn("slow");
			$("#popupComentarios").fadeIn("slow");
			popupStatus = 1;
		} else {
			
		}
	}

	function ocultarPopUpComentarios() {
		if(popupStatus==1) {
			$("#fondoPopup").fadeOut("slow");
			$("#popupComentarios").fadeOut("slow");
			popupStatus = 0;
		}
	}

	function centrarPopUps() {
		var windowWidth = document.documentElement.clientWidth;  
		var windowHeight = document.documentElement.clientHeight;  
		var popupHeight = $("#popUpComentarios").height();  
		var popupWidth = $("#popUpComentarios").width();  
		  
		$("#popupComentarios").css({  
			"position": "absolute",  
			"top": windowHeight/2-popupHeight/2,  
			"left": windowWidth/2-popupWidth/2  
		});  
		  
		  
		$("#fondoPopup").css({  
			"height": windowHeight  
		});  
	}

	function verComentarios(tareaId) {
		centrarPopups();
		mostrarPopupComentarios(tareaId);
	}
	
</script>



<input type="button" name="lalalalal" onClick="agregarComentarios(${tarea.idTarea})"/>


<table cellpadding="0" cellspacing="0" border="0" class="display" id="tabla">
	<thead>
	    <tr class="rowH">
	    <th>Id de Tarea</th>
	    <th>Id Comentario</th>
		<th>Titulo Comentario</th>
		<th>Notas Comentario</th>
		<th>Fecha de creacion</th>
		<th>Id de Creador</th>
		<th>Nombre de Creador</th>
		</tr>
    </thead>
    <tbody>
	    <s:iterator value="tarea.comentarios" var="c" status="status">
	        <tr class="<s:if test="#status.even">gradeA</s:if><s:else>gradeB</s:else>">
	           <td class="nowrap"><s:property value="#tarea.idTarea"/></td>
	           <td class="nowrap"><s:property value="#c.idComentario"/></td>
	           <td class="nowrap"><s:property value="#c.titulo"/></td>
	           <td class="nowrap"><s:property value="#c.notas"/></td>
	           <td class="nowrap"><s:property value="#c.fechaAlta"/></td>
	           <td class="nowrap"><s:property value="#c.creador.idUsuario"/></td>
	           <td class="nowrap"><s:property value="#c.creador.nombreCompleto"/></td>
	         
					<sec:authorize access="hasRole('ADMIN')">
						<td class="nowrap">
							<s:url action="comentarioBorrar" id="url">
			                    <s:param name="usuario.idUsuario" value="#u.idUsuario"/>
			                </s:url>
		                	<a href="<s:property value="#url"/>">Borrar</a>
					</sec:authorize>
			</tr>
	    </s:iterator>
    </tbody>
</table>



<div class="popup" id="popUpComentarios">
	<a class="popupCerrar" id="popupComentarios" href="javascript:ocultarPopupComentarios();">x</a>
	
	<div id="contenidoComentarios"></div>
</div>
<div class="fondoPopup" id="fondoPopup" onclick="ocultarPopUpComentarios()"></div>

<jsp:include page="/general/templatefooter.jsp" />